<script setup lang="ts">
import type { SelectValue } from 'ant-design-vue/es/select';

import { computed, ref } from 'vue';

import { ApiComponent } from '@vben/common-ui';

import { Select } from 'ant-design-vue';

import { createApiFunction } from '#/util/tool';

const props = withDefaults(
  defineProps<{
    api: ((arg?: any) => Promise<any[] | Record<string, any>>) | string;
    keywords?: string; // 关键字
    params?: Record<string, any>;
    // 请求方式
    requestMethod?: 'get' | 'post';
    searchKeys?: string; // 关键字对应的列名
    showSearch?: boolean;
    value?: SelectValue;
  }>(),
  {
    keywords: undefined,
    params: {} as any,
    requestMethod: 'post',
    showSearch: false,
    searchKeys: undefined,
    value: undefined,
  },
);

const emit = defineEmits<{
  (e: 'update:value', value: SelectValue | undefined): void;
}>();

const value = computed({
  get() {
    return props.value;
  },
  set(val) {
    emit('update:value', val);
  },
});

defineExpose({
  getValue() {
    return value.value;
  },
});
const searchValue = ref('');
const handleSearch = (value: string) => {
  searchValue.value = value;
};
</script>
<template>
  <ApiComponent
    :api="createApiFunction(api, requestMethod)"
    v-model="value"
    model-prop-name="value"
    loading-slot="suffixIcon"
    visible-event="onDropdownVisibleChange"
    class="w-full"
    :show-search="showSearch"
    @search="handleSearch"
    :params="{
      ...params,
      keywords: searchValue,
      searchKeys,
    }"
    :filter-option="showSearch ? false : undefined"
    :component="Select"
  />
</template>
<style lang="scss" scoped></style>
